<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>font-animation</title>
		<style>
			.font-container{
				width: 400px;
				height: 200px;
				background: cornflowerblue;
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -100px;
				text-align: center;
				line-height: 200px;				
			}
			.font-container>span:nth-of-type(1){
				display: inline-block;
				animation: font-slide 300ms linear 110ms infinite;
			}
			.font-container>span:nth-of-type(2){
				display: inline-block;
				animation: font-slide 300ms linear 120ms infinite;
			}
			.font-container>span:nth-of-type(3){
				display: inline-block;
				animation: font-slide 300ms linear 130ms infinite;
			}
			.font-container>span:nth-of-type(4){
				display: inline-block;
				animation: font-slide 300ms linear 140ms infinite;
			}
			.font-container>span:nth-of-type(5){
				display: inline-block;
				animation: font-slide 300ms linear 150ms infinite;
			}
			
			.font-container>span:nth-of-type(6){
				display: inline-block;
				animation: font-slide 300ms linear 160ms infinite;
			}
			
			.font-container>span:nth-of-type(7){
				display: inline-block;
				animation: font-slide 300ms linear 170ms infinite;
			}
			@keyframes font-slide{
				0%{transform: translateY(-10px);}
				50%{transform: translateY(10px);}
				100%{transform: translateY(0);}
			}
		</style>
	</head>
	<body>
		<div class="font-container">
			<span>L</span>
			<span>o</span>
			<span>a</span>
			<span>d</span>
			<span>i</span>
			<span>n</span>
			<span>g</span>
		</div>
	</body>
</html>
